<script setup lang="ts">
import { computed, inject, ref, toRef, toRefs } from "vue";
import { useCount } from "../../utils/hooks";

const { count, add, dec } = useCount();

const visible = defineModel("modelValue");

const user: any = inject("user");
const nn = computed(() => user());

const obj = ref({
  name: "xiaoman",
  age: 20,
});

// const { name, age } = toRefs(obj.value);
const name = toRef(obj.value, "name");
const age = toRef(obj.value, "age");

const update = () => {
  obj.value.name = "xuanmiao";
  obj.value.age = 100;
  console.log(obj.value);
};
</script>
<template>
  <div class="dialog" v-if="visible">
    <button @click="visible = false">关闭</button>
    <span>{{ nn }}</span>
    <p>数字：{{ count }}</p>
    <button @click="add(10)">add</button>
    <button @click="dec(8)">dec</button>
    <p>{{ name }}</p>
    <p>{{ age }}</p>
    <button @click="update()">修改</button>
  </div>
</template>

<style lang="scss" scoped>
.dialog {
  width: 100vw;
  height: 100vh;
  // position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.2);
}
</style>
